<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人博客</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
</head>
<body>
<!--顶部导航栏-->
<div th:replace="commons/common_user::topNavigationBar(action)"></div>

<!-- banner 图-->
<div style="margin-bottom: 20px;"></div>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div>
                <h1 th:text="${blog.blogTitle}"></h1>

                <span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd HH:mm:ss') + '  ' + blog.blogViews + '  浏览'}"></span>

                <p th:utext="${blog.blogContent}"></p>

                <th:block th:if="${!#lists.isEmpty(commentList) && blog.enableComment=='1'}">
                    <ul class="list-unstyled">
                        <li class="media" style="border-top: #ccc solid 1px; padding: 5px;"
                            th:each="comment:${commentList}">
                            <img th:src="@{/img/category/13.png}" class="mr-3" alt="...">
                            <div class="media-body">
                                <h5 class="mt-0 mb-1">[[${comment.commentator}]]<span
                                        th:text="${#dates.format(comment.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}"
                                        style="float: right; font-size: 14px; font-weight: normal;"></span></h5>
                                <p th:text="${comment.commentBody}"></p>
                            </div>
                        </li>
                    </ul>
                </th:block>

                <hr style="margin: 10px auto;">
                <!--评论-->
                <div style="margin-bottom: 20px;" th:if="${blog.enableComment=='1'}">
                    <div class="form-group">
                        <label for="commentBody">评论内容</label>
                        <textarea name="commentBody" id="commentBody" class="form-control" rows="3" required></textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label for="commentator">昵称</label>
                            <input type="text" name="commentator" id="commentator" class="form-control" placeholder="张三"
                                   required>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="phone">手机</label>
                            <input type="text" name="phone" id="phone" class="form-control" placeholder="11位手机号码"
                                   required>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="email">邮箱（可选）</label>
                            <input type="email" name="email" id="email" class="form-control"
                                   placeholder="name@example.com">
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="saveComment()">评论</button>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script>


    function saveComment() {
        let commentBody = $("#commentBody").val();
        let commentator = $("#commentator").val();
        let phone = $("#phone").val();
        let email = $("#email").val();
        let blogId = '[[${blog.blogId}]]';
        $.post({
            url: "/comment/saveComment",
            data: {
                'commentBody': commentBody,
                'commentator': commentator,
                'phone': phone,
                'email': email,
                'blogId': blogId
            },
            success: function (data) {
                if (data) {
                    alert("提交成功, 审核通过后会在本页面显示");
                    location.reload();
                } else {
                    console.log(data)
                }
            }
        })
    }


</script>
</html>